<template>
  <el-dialog title="题目预览" :visible="isShowDialog" class="dialog" :width="dialogWidth" @close="closeDialog" :close-on-click-modal="false" >
    <el-row :span="24">
    <meta name="referrer" content="never">
    <el-row :gutter="20">
      <el-col :span="6"><div>【题型】：{{topicType}}</div></el-col>
      <el-col :span="6"><div>【编号】：{{topicData.id}}</div></el-col>
      <el-col :span="6"><div>【难度】：{{difficultyType}}</div></el-col>
      <el-col :span="6"><div>【标签】：{{topicData.tags}}</div></el-col>
      <el-col :span="6"><div>【学科】：{{topicData.subjectName}}</div></el-col>
      <el-col :span="6"><div>【目录】：{{topicData.directoryName}}</div></el-col>
      <el-col :span="6"><div>【方向】：{{topicData.direction}}</div></el-col>
    </el-row>
    <hr>
    <div v-if="topicData.questionType==='1'">
      <div >【题干】：</div>
      <span v-html="topicData.question" style="color:blue;"></span>
      <div>单选题 选项：（以下选中的选项为正确答案）</div>
      <el-radio-group v-model="radio">
        <el-radio @click.native="radioPrev"
         v-for="item in optionsList"
          :key="item.id"
            :label="item.isRight"
             style="display:block;margin:20px 0px;">{{item.title}}</el-radio>
      </el-radio-group>
    </div>
    <div v-if="topicData.questionType==='2'">
      <div >【题干】：</div>
      <span v-html="topicData.question" style="color:blue;"></span>
      <div>多选题 选项：（以下选中的选项为正确答案）</div>
      <el-checkbox @click.native="radioPrev"
      v-for="item in optionsList"
       :key="item.id"
       :label="item.title"
       :checked="item.isRight===1"
        style="display:block;margin:20px 0px;">{{item.title}}</el-checkbox>
    </div>
    <div v-if="topicData.questionType==='3'">
      <div >【题干】：</div>
      <span v-html="topicData.question" style="color:blue;"></span>
    </div>
    <hr>
    <span>【参考答案】：</span>
    <el-button type="danger" size="small" @click="videoBtn" v-if="topicData.videoURL">视频答案预览</el-button>
    <div class="video" v-if="isVideo">
      <video :src="topicData.videoURL" controls ></video>
    </div>
    <hr>
    <span>【答案解析】：</span>
    <span v-html="topicData.answer"></span>
    <hr>
    <div class="topicNote">【题目备注】：{{topicData.remarks}} </div>
    <el-button style="margin-left:45%"  type="primary" @click="closeDialog" >关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { questionType } from '@/api/hmmm/constants'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    topicData: {
      type: Object,
      default: () => {}
    },
    isVideo: {
      type: Boolean,
      default: false
    },
    optionsList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      questionType: questionType,
      radio: 1,
      dialogWidth: '800px'
    }
  },
  mounted () {
    window.onresize = () => {
      return (() => {
        this.setDialogWidth()
      })()
    }
  },
  computed: {
    topicType () {
      if (this.topicData.questionType === '1') {
        return '单选'
      } else if (this.topicData.questionType === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    difficultyType () {
      if (this.topicData.difficulty === '1') {
        return '简单'
      } else if (this.topicData.difficulty === '2') {
        return '一般'
      } else {
        return '困难'
      }
    }

  },
  methods: {
    closeDialog () {
      this.$emit('update:isShowDialog', false)
      this.$emit('update:isVideo', false)
    },
    videoBtn () {
      this.$emit('update:isVideo', true)
    },
    radioPrev (e) {
      e.preventDefault()
    },
    setDialogWidth () {
      var val = document.body.clientWidth
      const def = 800 // 默认宽度
      if (val < def) {
        this.dialogWidth = '100%'
      } else {
        this.dialogWidth = def + 'px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-col {
    margin: 10px 0px;
  }
  .topicNote{
    margin-bottom: 50px ;
  }
  .video{
    width: 400px;
    height: 300px;
    video{
      width: 100%;
      height: 100%;
    }
  }
</style>
